<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
        }

        .label {
            display: inline-block;
            width: 3.5em;
            text-align: right;
            font-size: 16px;
        }

        input, select {
            box-sizing: border-box;
            font-size: 16px;
            width: calc(100% - 4em);
        }
    </style>
    <script>
      /*本金 * 万元息 = 月供
      月供 * 36 = 本息和
      本息和 - 本金 = 利息
      利息/本金 = 利率
      利率/36 = 厘

      0.0327 和 0.0323*/
      let bj = 0;
      let wyx = 0.0327;

      function onBJChange(e) {
        bj = Number(e.target.value) || 0;
        update();
      }

      function onWYXChange(e) {
        wyx = Number(e.target.value);
        update();
      }

      function round(value) {
        return Number(value.toFixed(4));
      }

      function set(id, value) {
        document.getElementById(id).innerText = round(value);
      }

      function update() {
        const yg = bj * wyx;
        const bxh = yg * 36;
        const lx = bxh - bj;
        const ll = lx / bj || 0;
        const li = ll / 36;

        set("yg", yg);
        set("bxh", bxh);
        set("lx", lx);
        set("ll", ll);
        set("li", li);
      }
    </script>
</head>
<body>
    <div>
        <span class="label">本金:</span>
        <input type="text" oninput="onBJChange(event)">
    </div>
    <div>
        <span class="label">万元息:</span>
        <select onchange="onWYXChange(event)">
            <option value="0.0327">0.0327</option>
            <option value="0.0323">0.0323</option>
        </select>
    </div>
    <div>
        <span class="label">月供:</span>
        <span id="yg"></span>
    </div>
    <div>
        <span class="label">本息和:</span>
        <span id="bxh"></span>
    </div>
    <div>
        <span class="label">利息:</span>
        <span id="lx"></span>
    </div>
    <div>
        <span class="label">利率:</span>
        <span id="ll"></span>
    </div>
    <div>
        <span class="label">厘:</span>
        <span id="li"></span>
    </div>
    <pre>
        本金 * 万元息 = 月供
        月供 * 36 = 本息和
        本息和 - 本金 = 利息
        利息/本金 = 利率
        利率/36 = 厘
    </pre>
</body>
</html>